<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="text1">中国联通</h1>
<input type="button" value="将中国联通修改为山东联通（dom方法）" onclick="dom_modify()">
<h1 id="text2">中国移动</h1>
<input type="button" value="将中国联通修改为山东移动（jQuery方法）" onclick="jQuery_modify()">
<hr>
<div>
    <input type="text" id="name" placeholder="用户名">
    <input type="password" id="password" placeholder="密码">
    <input type="button" onclick="getInfo()" value="查询">
</div>
<div>
    <table border="1px">
        <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="show">
        </tbody>
    </table>
</div>
</body>
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    /*
    1.找到标签
    2.修改值
     */
    function dom_modify() {
        document.getElementById('text1').innerText = '山东联通';
    }

    function jQuery_modify() {
        $('#text2').text('山东移动');
        $('#text2').val('山东移动');
    }

    /*
        选择器类似css
        1.id选择器(唯一)   $("#id")
        2.类（样式）选择器   $(".class")
        3.标签选择器   $("div")
        4.层级选择器   $(".c1  .c2  h1")
        5.多选择器   $("#id1,#id2")
        6.属性选择器  $("input[name='n1']")  input标签中name属性为n1的


        间接寻找：
        1.找兄弟   $('.c1').prev() 标签为c1的上一个兄弟
                  $('.c1').next() 标签为c1的下一个兄弟
                  $('.c1').next().next() 标签为c1的下一个兄弟的兄弟
                  $('c1').siblings()  标签为c1的所有兄弟
        2.找父亲   $('.c1').parent() 标签为c1的父亲
                  $('.c1').parent().parent() 标签为c1的父亲的父亲
        3.找孩子   $('.c1').children() 标签为c1的所有孩子
                  $('.c1').children('#id1') 标签为c1的所有孩子中id为id1的孩子
        4.找子孙   $('.c1').find() 标签为c1的所有子孙
                  $('.c1').find('#id1') 标签为c1的所有子孙中id为id1的子孙
         */
    /*
    $('#text2').text();获取文本
    $('#text2').text('山东移动');设置文本
    $('#text2').val();获取用户输入的值
    $('#text2').val('111');设置用户输入的值
    var tr = $('<tr>');建tr标签
    $("#show").append(tr);tr加入tbody标签
     */
    function getInfo() {
        var name = $('#name').val();
        var password = $('#password').val();
        //创建tr标签  删除按钮标签
        var tr = $('<tr>');
        var button = $('<input type="button" onclick="deleteInfo(this)" value="删除">')
        //创建td标签并赋予文本
        var td_name = $('<td>').text(name);
        var td_password = $('<td>').text(password);
        //td加入tr标签
        tr.append(td_name, td_password,button);
        //tr加入tbody标签
        $("#show").append(tr);
    }
    function deleteInfo(self){
        //删除self所在标签td的父标签tr
        $(self).parent().remove();
    }

</script>
</html>